/**
 * 获取第一个表格的可视化高度
 * @param {*} extraHeight 表格之上，类ant-layout-content容器之内，其他区域高度的总和
 * @param {*} id 当前页面中有多个table时需要制定table的id
 * @param {*} idotherHeight 是当前页面的补偿高度
 */
import Sortable from "sortablejs";
import { ref, reactive, onMounted, nextTick, watch, createVNode, computed, defineEmits } from "vue";
const emit = defineEmits(['dragEnd']);
export function getTableScroll(extraHeight: string | number, id: string, otherHeight: number = 0, fixedHieght: number = 0) {
  if (typeof extraHeight == "undefined") {
    //  默认底部分页64 + 边距10
    extraHeight = 74
  }
  let tHeader = null
  if (id) {
    tHeader = document.getElementById(id) ? document.querySelector(`#${id} .ant-spin-container`) : null
  } else {
    tHeader = document.getElementsByClassName("ant-spin-container")[0]
  }
  //表格内容距离顶部的距离
  // 56 是表头高度， 24是容器区域上边距或下边距高度， 72 = 48 + 24, 48是头部导航的高度
  let tHeaderBottom = ''
  let bottom = 1000;
  let container: any = null
  container = document.querySelector('.ant-layout-content'); // 容器高度
  if (tHeader) {
    tHeaderBottom = getComputedStyle(tHeader).height.replace('px', '');
    // 56 是表头高度， 24是容器区域上边距高度
    // console.log(getComputedStyle(container).height, 'container', getComputedStyle(tHeader).height, tHeader.getBoundingClientRect().bottom);
    bottom = +getComputedStyle(container).height.replace('px', '') - 88 - 48 - otherHeight - (+getComputedStyle(tHeader).height.replace('px', ''))  // tHeader.getBoundingClientRect().bottom;
  }

  //窗体高度-表格内容顶部的高度-表格内容底部的高度;


  let y = 0

  y = container ? (getComputedStyle(container || null) as any).height.replace('px', '') - 24 - 56 - 72 - 135 - otherHeight : 0;
  console.log(bottom, 'bottom')
  let isFixed = bottom < 145;
  return { y: y, isFixed: isFixed, bottom: bottom }
}
//列表拖拽排序
export function inintDrag(ele: string, dataSource: any, key: string, obj: any) {
  console.log(dataSource, 6666333)
  let sortDom = document.querySelector(`#${ele} .ant-table-tbody`);

  Sortable.create(sortDom as HTMLElement, {
    disabled: false,
    //sort: true, // 给了就无法拖动
    //handle: ".ant-table-row",
    animation: 150,
    draggable: '.ant-table-row', // tr拖动
    dragClass: "dragClass",
    dataIdAttr: "chosenClass", //给停靠位置添加的class（可以给这个class定义样式
    ghostClass: "ghostClass",
    forceFallback: false,
    fallbackClass: "sortable-fallback",  // 当使用forceFallback的时候，被复制的dom的css类名
    onStart({ item }) {
      console.log(dataSource, 1111111);
    },
    onMove(evt) {


    },
    onEnd: ({ newIndex, item }: { newIndex: any; item: any }) => {
      let Oldindex: any = '';
      let source = JSON.parse(JSON.stringify(dataSource));
      source[key].forEach((datas: any, index: number) => {
        if (datas.id == item.dataset.rowKey) {
          Oldindex = index;
        }
      });
      obj.value = { id: +item.dataset.rowKey, toId: source[key][newIndex - 1].id, isBefore: Oldindex > newIndex - 1 };
    },
  });
};